<template>
  <div class="box3">
<div style="margin-left: 80px">
  <div style="display: flex;margin-top: 20px">
      <div v-for="(item,index) in ArtistType" :key="item" class="type1 point"  @click="type=item.type;searchArtistList(type,area,initial);clickItem(index);" :class="addbkColor(index)">{{item.name}}</div>
  </div>
  <div style="display: flex;margin-top: 20px">
      <div v-for="(item,index) in areaType" :key="item" class="type2 point" @click="area=item.area;searchArtistList(type,area,initial);clickItem2(index)" :class="addbkColor2(index)">{{item.name}}</div>
  </div>
  <div style="display: flex;margin-top: 20px">
    <div v-for="(item,index) in initialList" :key="item" class="type3 point" @click="initial=item;searchArtistList(type,area,initial);clickItem3(index)" :class="addbkColor3(index)">{{item}}</div>
  </div>

  <div class="ArtistBox">
    <div v-for="item in  ArtistList" :key="item" class="ArtistList">
      <img v-lazy="item.picUrl" class="img" @click="search1(item.name)">
      <p style="font-size: 20px">{{item.name}}</p>
    </div>
  </div>
</div>
  </div>
</template>

<script setup>
import { reactive, ref} from "vue";
import axios from "axios";
import {useSongsStore} from "@/Store/Pinia/pinia";
import { useRouter } from "vue-router";
import {baseURL} from "@/request/index.js";
const router=useRouter();
const songsStore=useSongsStore();
const ArtistList=ref([]);
const type=ref(-1);
const area=ref(-1);
const initial=ref(-1);
const currentIndex=ref(0);
const currentIndex2=ref(0);
const currentIndex3=ref(0);
const bkcolor=ref(true)


const ArtistType=reactive([
           {name:"全部",type:-1},
           {name:"男歌手",type:1},
           {name:"女歌手",type:2},
            {name:"乐队",type:3}
]);
const areaType=reactive([
  {name:"全部",area:-1},
  {name:"华语",area:7},
  {name:"欧美",area:96},
  {name:"日本",area:8},
  {name:"韩国",area:16},
  { name:"其他",area:0}
]);
const initialList=reactive(["全"]);

function getinitial() {
  for (var i =0; i <26; i++) {
    initialList.push(String.fromCharCode(65+i));
  }
  initialList.push("#");
}
getinitial();
const getArtistList= () => { //获取歌手列表
  axios.post(baseURL+"/artist/list?type=-1&area=7&limit=100").then((res) => {
    // console.log(res);
     ArtistList.value=res.data.artists;
  })
}
getArtistList();

async function searchArtistList(type,area,initial){ //匹配歌手
   if(initial==="#") initial=0;
   const a=await fetch(baseURL+"/artist/list?type="+type+"&area="+area+"&initial="+initial+"&limit=100")
   const b= await a.json();
   console.log(b);
   ArtistList.value=b.artists;

}
function search1(value){
  songsStore.search(value);
  songsStore.show=1;
  router.push({path:'/homePage/searchList/1'})
}
function clickItem(index) {
  currentIndex.value = index;
}
function  addbkColor(index) {
  if (currentIndex.value == index) {
    return {active: bkcolor.value}
  }
}
function clickItem2(index) {
  currentIndex2.value = index;
}
function  addbkColor2(index) {
  if (currentIndex2.value == index) {
    return {active: bkcolor.value}
  }
}
function clickItem3(index) {
  currentIndex3.value = index;
}
function  addbkColor3(index) {
  if (currentIndex3.value == index) {
    return {active: bkcolor.value}
  }
}
</script>

<style scoped>
.box3{
  width: 100%;
  height: 450px;
  overflow-y:scroll;
  overflow-x:hidden;
}
.type1{
  text-align: center;
  width: 97px;
  height: 30px;
  margin-right: 100px;
  border-radius:50px 50px 50px 50px;
}
.type2{
  text-align: center;
  width: 100px;
  height: 30px;
  margin-right: 100px;
  border-radius:50px 50px 50px 50px;
}

.type3{
  text-align: center;
  width: 30px;
  height: 20px;
  margin-right: 20px;
  border-radius:50px 50px 50px 50px;
}

.ArtistBox{
  display: flex;
  flex-wrap:wrap;
}

.ArtistBox .ArtistList{
  width: 200px;
  height: 250px;
  margin-left: 30px;
  margin-top: 20px;
  text-align: center;
}

.ArtistBox .ArtistList .img{
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.point:hover{
  background-color: #42b983;
  cursor: pointer;
}

.active{
  background-color: #42b983;
}
</style>